<template>
  <div class="serch-form">
    <el-form
      ref="formRef"
      :inline="true"
      :model="searchForm"
      class="demo-form-inline"
    >
      <el-row>
        <el-col
          :span="6"
          v-for="(item, index) in formDataConfig.slice(
            0,
            conditionFold ? conditionInitShowLength : formDataConfig.length
          )"
          :key="item.key"
        >
          <el-form-item :label="item.label" :prop="item.prop">
            <el-input
              class="input-width"
              v-if="item.type === 'input' || !item.type"
              v-model="searchForm[item.prop]"
              :placeholder="item.placeHolder"
              clearable
            />
            <el-select
              clearable
              v-if="item.type === 'select'"
              v-model="searchForm[item.prop]"
              class="m-2"
              :placeholder="item.placeHolder"
            >
              <el-option
                v-for="kk in item.selectOptions"
                :key="kk.value"
                :label="kk.label"
                :value="kk.value"
              />
            </el-select>
            <el-date-picker
              v-model="searchForm[item.prop]"
              :type="item.dateType"
              v-if="item.type === 'date'"
              :placeholder="item.placeHolder"
            />
            <slot v-if="item.type === 'slot'" :name="item.slotName"></slot>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="onSubmit(formRef)"
              >查询</el-button
            >
            <el-button @click="resetForm(formRef)">重置</el-button>
            <el-button
              v-if="formDataConfig.length > conditionInitShowLength"
              type="primary"
              link
              @click="areConditionFold"
            >
              {{ conditionFold ? "展开" : "收起" }}
              <el-icon v-if="conditionFold"><ArrowDown /></el-icon>
              <el-icon v-else><ArrowUp /></el-icon>
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import { ref, reactive, watch, computed, onMounted } from "vue";
const props = defineProps({
  formDataConfig: {
    default: [],
    type: Array,
  },
});
const emit = defineEmits(["search"]);
const searchForm = ref({});
const conditionFold = ref(true);
const conditionInitShowLength = 3;
const areConditionFold = () => {
  conditionFold.value = !conditionFold.value;
};
const resetForm = (formEl) => {
  searchForm.value = {};
  emit("search", searchForm.value, 0);
  // deleteDate();
};
const onSubmit = () => {
  emit("search", searchForm.value, 1);
};
const deleteDate = () => {
  delete searchForm.value.start_time;
  delete searchForm.value.end_time;
  //清空项目名称的值，找到为时间选择器的值，全部清空
  props.searchOptions.forEach((item) => {
    if (item.optionType == "datePicker") {
      searchForm.value[item.prop] = [];
    }
  });
};
</script>
<style lang="scss" scoped>
.serch-form {
  padding: 15px;
  // border-bottom: 1px solid #f2f2f2;
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 0;
  .input-width {
    width: 240px;
  }
  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
  :deep(.el-form-item__label) {
    font-weight: bold !important;
  }
}
</style>
